<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" :showFooter="true" :title="getTitle" width="100%"
    :show-ok-btn="false" @cancel="cancelFn">
    <!--    @cancel="cancelFn"-->

    <div style="height: 100%">
      <approverStatusIcon :status="dataList.status"></approverStatusIcon>

      <div>
        审批单据编号: <span>{{ approveNo }}</span>
      </div>
      <div style="width: 100%; height: 450px">
        <!-- v-on="gridEvents" overflow: hidden -->
        <!-- <watermarkContainer :text="statusObj.val" :color="statusObj.color"> -->
        <div style="padding-top: 8px;font-weight: bold" :style="{ color: statusObj.color }">{{ statusObj.val }}
        </div>
        <div style="padding-top: 8px;">
          {{ dataList.title }}
        </div>
        <!-- <div style="padding-top: 8px;">
            审批单据编号: <span>{{ approveNo }}</span>
          </div> -->

        <div>
          <div style="padding-top: 8px;font-weight: bold;">合计:</div>

          <div v-for="(item, index) in countApproverList" style="display: flex; align-items: center;">
            <div class="count-i">{{ getUserName(item) }}</div>
            <div class="count-i count-i-p">{{ item.userPrice }}元 </div>

          </div>
        </div>
        <div v-if="dataList.stateName">该单据 <span style="color: red;">{{ dataList.stateName }}</span> 请重新发起审批</div>
        <!-- </watermarkContainer> -->

        <vxe-grid ref="tableRef" v-bind="gridOptions">
          <template #toolbar_buttons>
          </template>
          <template #footer_totalAllPrice>
            <!--           <span style="color: red;">{{manageUserPrice  totalObj.totalAllPrice }}{{ totalObj.totalAllPrice ? '元' : '' }}</span>-->
          </template>
          <template #footer_manageUserPrice>
            <span style="color: red;">{{ totalObj.manageUserPrice }}{{ totalObj.manageUserPrice ? '元' : '' }}</span>
          </template>

        </vxe-grid>
        <approverLogView :approveNo="approveNo" :api="ywApprovalLogView" ref="approverLogViewRef" @success="reloadFn"
          :approvalLogId="approvalLogId"></approverLogView>

      </div>
      <FaPiaoItemModal @register="skrq[0]"></FaPiaoItemModal>
      <yuShouDetailModal @register="yushouModal[0]"></yuShouDetailModal>
      <FormModal @register="approveDrawer[0]" />

    </div>

    <template #footer>
      <Button @click="cancelFn">关闭</Button>
      <approverLogButton :approveNo="approveNo" :passApi="ywZhongBuPass" :back-api="ywZhongBuBack" @success="reloadFn">
      </approverLogButton>

    </template>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, h, toRaw, reactive } from 'vue';
import approverLogView from '@/views/components/approverLogView/list.vue';
import approverLogButton from '@/views/components/approverLogButton/approverLogButton.vue'
import { useDrawer } from "@/components/Drawer";

import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridInstance,
  VxeGridListeners, VxeGridPropTypes,
  VxeTableDefines,
} from '@/components/VxeTable';
import {
  paseTags2
} from './role.data';
import {
  checkboxCountFn
} from '../ywZhongBuApply/role.data';
import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { Form, Button, Input, InputNumber, DatePicker, Select } from 'ant-design-vue';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import { ywApprovalLogView, ywApprovalShow, ywZhongBuPass, ywZhongBuBack, countApproverNoTotal, ywApprovalDetail, ywApprovalDetailByApproveNo } from '@/api/sys/approval';
import FormModal from '@/views/heng/yw2/ywApproveList/FormModal.vue';

import { BasicTree, TreeItem } from '@/components/Tree';
import { moneyAffrimLogList } from '@/api/heng/ywManage';
import { useMessage } from "@/hooks/web/useMessage";
import FaPiaoItemModal from "@/views/heng/yw2/ywMoneyList/FaPiaoItemModal.vue";
import yuShouDetailModal from '@/views/heng/yw2/ywMoneyList/yuShouDetailModal.vue';
import watermarkContainer from '@/views/components/watermarkContainer.vue';
import approverStatusIcon from '@/views/components/approverStatusIcon/index.vue';

const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const treeData = ref<TreeItem[]>([]);
const { createMessage } = useMessage();
const mouldMainId = ref("");

const formData = ref({})
const totalObj = ref({});
const statusObj = ref({ val: "", color: "" })
const tableRef = ref<VxeGridInstance>();
const countApproverList = ref([]);
const approverLogViewRef = ref();
const skrq = useModal();
const yushouModal = useModal();

const confirmColumns: VxeGridPropTypes.Columns = [
  {
    title: '单据来源编号',
    field: 'orderNo',
    showOverflow: 'title',
    // width: 130,
    slots: {
      default: ({ row }) => {
        let title = "";
        let color = "";
        let props = {
          onClick: () => skrqOpenFn(row)
        };
        return h('a', props, row.orderNo);
      },
    },

  },
  {
    title: '人民币总金额',
    field: 'totalAllPrice',
    slots: {
      default: ({ row }) => {
        let title = "";
        let color = "";
        let props = {
        };

        return h('span', props, row.totalAllPrice);
      },
      footer: 'footer_totalAllPrice',
    },
    align: 'center',
    width: 100,
  },
  {
    title: '抽成比例',
    field: 'merchandiserUserRate',
    formatter: ({ cellValue, row, column }) => `${cellValue ? cellValue + '%' : ''}`,
    showOverflow: 'title',
    width: 100,
  },


  {
    title: '业务经理',
    field: 'manageUserName',
    align: 'center',
    width: 70,
  },
  {
    title: '经理抽成',
    field: 'manageUserPrice',
    // formatter: ({ cellValue, row, column }) => `${cellValue ? cellValue + '元' : ''}`,
    slots: {
      footer: 'footer_manageUserPrice',
    },
    align: 'center',
    width: 90,
  },
  {
    title: '部门',
    field: 'salesmanDeptName',
    align: 'center',
    width: 130,
  },
];


const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: confirmColumns,
  filterConfig: {
    remote: true,
  },
  exportConfig: {},

  showFooter: true,
  footerData: [
    { orderNo: '合计' }
  ],
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },

  pagerConfig: {
    enabled: false
  },

});


const dataList = ref({});
const approveNo = ref("");
const approvalLogId = ref("");

const approveDrawer = useDrawer();


const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  //打开弹层后的回调
  // resetFields();
  setDrawerProps({ confirmLoading: false });
  dataList.value = data.record;
  // console.log("--dataList.value:",dataList.value)
  approveNo.value = data.record.approveNo;
  approvalLogId.value = data.record.approvalLogId;

  ywApprovalDetailFn();


});

const getTitle = computed(() => ('业务抽成明细'));

function moneyAffrimLogListFn() {
  let r_data = { approveNo: approveNo.value }
  moneyAffrimLogList(r_data).then(res => {
    if (res.code == 200) {
      tableRef.value?.reloadData(res.data);
      totalObj.value = paseTags2(res.data);
      gridOptions.footerData = [{ orderNo: "合计:" + res.data.length + "条" }];

    }
  })
}


function countApproverNoTotalFn() {
  let r_data = { approveNo: approveNo.value }

  countApproverNoTotal(r_data).then(res => {
    if (res.code == 200) {
      countApproverList.value = res.data
    }
  })
}

//async function handleSubmit()

const handleSubmit = () => {
  try {

    // const values = await validate();



  } catch (e) {
    console.log(e)
  } finally {
    setDrawerProps({ confirmLoading: false });

  }
}

function sunccFn(result) {
  if (result && result.code == 200) {
    createMessage.success(result.message);
  } else {
    createMessage.error(result.message);
  }
  closeDrawer()
  emit('success');
}

function getUserName(item) {
  let userName = item.userName;
  if (!item.userName) {
    if (item.userType == "manage_user") {
      let deptName = dataList.value.deptName;
      if (deptName) {
        if (deptName == "迪卡侬营销部" || deptName == "OEM营销部") {
          userName = "经理(空)"
        }
      }
    }
  }
  return userName;
}

function skrqOpenFn(record) {
  let t_data = {
    // approveNo: record.orderNo,
    approvalLogId: record.approvalLogId
  };
  console.log("--t_data:", record);

  approveDrawer[1].openDrawer(true, {
    // isView: true,
    record: t_data,
  });

}

function openAllFaPiaoFn() {
  skrq[1].openModal(true, {
    isView: true,
    isAll: true,
    record: {
      approveNo: approveNo.value
    },
  });
}



function reloadFn() {

  approverLogViewRef.value.reloadFn();
  emit('success');
  ywApprovalDetailFn();

  // tableRef.value.commitProxy('reload');

}

function ywApprovalDetailFn() {
  setDrawerProps({ confirmLoading: true });
  ywApprovalDetailByApproveNo({ approveNo: approveNo.value }).then((res) => {
    if (res.code == 200) {
      if (res.data) {
        dataList.value = res.data;
        statusObj.value = paseTags2(res.data);
        moneyAffrimLogListFn();
        countApproverNoTotalFn();
        approverLogViewRef.value.reloadFn();
      }
    }
  }).finally(() => {
    setDrawerProps({ confirmLoading: false });
  })
}

function cancelFn() {
  closeDrawer();
  emit("success");
  //  tableRef.value.clearValidate();
}



</script>
<style lang="less">
.item-row {
  margin: 0 auto;

  //padding-left: 5%;
  .ant-form-item-label {
    flex: 0 0 28.5%;
    max-width: 28.5%;
  }
}

.count-i {
  width: 200px;
  margin-top: 8px;
}

.count-i-p {
  color: #c65206;
}
</style>
